<template>
  <div class="gdap-payment">
    <p
      style="  font-family:SiYuanBold;color:rgb(207, 139, 50);font-size:30px;text-align: center;"
    >微信支付</p>
    <p
      style="color: rgb(187, 187, 187); min-width: 10px; min-height: 10px;font-family: Oswald;ont-size: 12px;text-align: center;"
    >PAYMENT FOR WeChat</p>

    <div style="width:664.38px;height:170px;">
      <p class="b">
        PAYMENT
        <br>FOR PURCHASE
      </p>
    </div>
    <div style="margin:-10% 0">
      <el-row style="text-align:center;margin:5%">
        <el-col :span="6" style="margin-left:38%">
          <div
            align="center"
            id="qrcode"
            style="margin:auto auto; border:2px solid #ddd;height: 300px;width:300px;padding-top: 50px"
            v-if="payQr"
          >
            <p>
              请用手机微信扫描下方二维码完成支付
              <br>
              <br>
            </p>
          </div>
          <div style="margin:auto auto; border:2px solid #ddd;height: 300px;width:300px;padding-top: 50px" v-else>
            <h3>支付成功！</h3>
          </div>
        </el-col>
      </el-row>
      <el-row style="text-align:center;">
        <router-link to="/"><el-button>不想买了</el-button></router-link>

        <el-button @click="paySuccess">支付成功</el-button>
      </el-row>
    </div>

    
  </div>
</template>
<script>
import api from "../../utils/api";
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      payQr: true,
      outTradeNo: "",
      timer: 0
    };
  },

  mounted() {
    var item = {};
    item.fieldName = "outTradeNo";
    item.constraint = "EQUALS";
    item.inputType = "input";
    item.fieldValue = this.$route.params.outTradeNo;
    var searchConditionArray = new Array();
    searchConditionArray.push(item);
    var params = "searchCond=" + JSON.stringify(searchConditionArray);
    var url = "";
    api({
      url: "/nceeSysMgr/rest/data/searchByCond/" + "PayRecord",
      method: "post",
      data: params
    }).then(res => {
      if (res.status === 200) {
        this.outTradeNo = res.data[0].outTradeNo;
        url = res.data[0].payUrl;
        let qrcode = new QRCode("qrcode", {
          width: 200,
          height: 200,
          text: url, // 二维码地址
          colorDark: "#000",
          colorLight: "#fff"
        });
      }
    });
  },
  methods: {
    paySuccess() {
      this.timer++;
      if (this.timer > 3) {
        this.$message({
          message: "您的订单支付失败或未支付！如有疑问请联系客服人员！",
          type: "warning"
        });
      }
      var item = {};
      item.fieldName = "outTradeNo";
      item.constraint = "EQUALS";
      item.inputType = "input";
      item.fieldValue = this.outTradeNo;
      var searchConditionArray = new Array();
      searchConditionArray.push(item);
      var params = "searchCond=" + JSON.stringify(searchConditionArray);
      api({
        url: "/nceeSysMgr/rest/data/searchByCondAndOrderBy/" + "PayRecord",
        method: "post",
        data: params
      }).then(res => {
        console.log(res, "pay res");
        if (res.data.length > 0) {
          if (
            res.data[0].tradeState === "3" &&
            res.data[0].recodeStatus === "2"
          ) {
            searchConditionArray = new Array();
            var item = {};
            item.fieldName = "outTradeNo";
            item.constraint = "EQUALS";
            item.inputType = "input";
            item.fieldValue = item.outTradeNo;
            searchConditionArray.push(item);
            var item = {};
            item.fieldName = "tradeState";
            item.constraint = "EQUALS";
            item.inputType = "input";
            item.fieldValue = "3";
            searchConditionArray.push(item);
            var params = "searchCond=" + JSON.stringify(searchConditionArray);
            api({
              url:
                "/nceeSysMgr/rest/data/searchByCondAndOrderBy/" +
                "GoodsPayView",
              method: "post",
              data: params
            }).then(res => {
              this.$message({
                message: "支付成功！3秒钟后跳转首页开始使用",
                type: "success"
              });
              this.payQr = false
              setTimeout(() => {
                this.$router.push('/')
              }, 3000)
            });
          }
        }
      });
    }
  }
};
</script>
<style scoped>
#preloader_1 {
  position: relative;
}

#preloader_1 span {
  display: block;
  bottom: 0px;
  width: 9px;
  height: 5px;
  background: #9b59b6;
  position: absolute;
  -webkit-animation: preloader_1 1.5s infinite ease-in-out;
  -moz-animation: preloader_1 1.5s infinite ease-in-out;
  -ms-animation: preloader_1 1.5s infinite ease-in-out;
  -o-animation: preloader_1 1.5s infinite ease-in-out;
  animation: preloader_1 1.5s infinite ease-in-out;
}

#preloader_1 span:nth-child(2) {
  left: 11px;
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -ms-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

#preloader_1 span:nth-child(3) {
  left: 22px;
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -ms-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

#preloader_1 span:nth-child(4) {
  left: 33px;
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  -ms-animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

#preloader_1 span:nth-child(5) {
  left: 44px;
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -ms-animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

@-webkit-keyframes preloader_1 {
  0% {
    height: 5px;
    -webkit-transform: translateY(0px);
    background: #9b59b6;
  }
  25% {
    height: 30px;
    -webkit-transform: translateY(15px);
    background: #3498db;
  }
  50% {
    height: 5px;
    -webkit-transform: translateY(0px);
    background: #9b59b6;
  }
  100% {
    height: 5px;
    -webkit-transform: translateY(0px);
    background: #9b59b6;
  }
}

@-moz-keyframes preloader_1 {
  0% {
    height: 5px;
    -moz-transform: translateY(0px);
    background: #9b59b6;
  }
  25% {
    height: 30px;
    -moz-transform: translateY(15px);
    background: #3498db;
  }
  50% {
    height: 5px;
    -moz-transform: translateY(0px);
    background: #9b59b6;
  }
  100% {
    height: 5px;
    -moz-transform: translateY(0px);
    background: #9b59b6;
  }
}

@-ms-keyframes preloader_1 {
  0% {
    height: 5px;
    -ms-transform: translateY(0px);
    background: #9b59b6;
  }
  25% {
    height: 30px;
    -ms-transform: translateY(15px);
    background: #3498db;
  }
  50% {
    height: 5px;
    -ms-transform: translateY(0px);
    background: #9b59b6;
  }
  100% {
    height: 5px;
    -ms-transform: translateY(0px);
    background: #9b59b6;
  }
}

@keyframes preloader_1 {
  0% {
    height: 5px;
    transform: translateY(0px);
    background: #9b59b6;
  }
  25% {
    height: 30px;
    transform: translateY(15px);
    background: #3498db;
  }
  50% {
    height: 5px;
    transform: translateY(0px);
    background: #9b59b6;
  }
  100% {
    height: 5px;
    transform: translateY(0px);
    background: #9b59b6;
  }
}
</style>
